<!-- 我的粉丝 -->
<template>
  <div class="myfocus-container">
    <div class="row" v-for="(focus,index) in actrows" :key="index">
<el-card shadow="always" :body-style="{ padding: '0px' }" v-for="(item,index) in focus" :key="index" class="card">
    <author-card></author-card>
    </el-card>
    </div>
    
    
  </div>
</template>

<script>
import AuthorCard from '@/subcomponents/oneAuthorCard.vue'
export default {
  data () {
    return {
         myfocus: [
        {
          id: 1
        },
        {
          id: 2
        },

        {
          id: 3
        },

        {
          id: 4
        },

        {
          id: 5
        },
        {
          id: 6
        }
      ],
      actrows: []

    };
  },
  components:{
    AuthorCard
  },
  mounted: function() {
    this.changeRow();
    console.log(this.actrows)
    
  },
  methods: {
   changeRow() {
      var rowNum = parseInt(Math.ceil(this.myfocus.length / 4));
      var n = 4;
      for (var i = 0; i < rowNum; i++) {
       let temp =this.myfocus.slice(i*n,i*n+n)
       this.actrows.push(JSON.parse(JSON.stringify(temp)))
      }
      return;
    }
  }
}

</script>
<style lang='scss' scoped>
.myfocus-container{
  margin:50px 100px;
  
  .row{
width:100%;
  display: flex;
  justify-content: flex-start;
  margin:50px;
  .card{
    width:305px;
   margin-right:20px;
    
  }
  }
  
}
</style>